import React from 'react';
import './check.scss';
import {dateCountdownConvert, DateFormat, formatToCreateDate} from "auxiliaries/extends/format";
import {observer} from "mobx-react";
import {LinkSelectable} from 'components/data/react-element';
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {RouterList} from "@/routers/router-list";

//展示最新活动的列表
//狗屎实现
//应对并强行共用了: 个人中心的报名活动页/主页/首页列表项三大地方
//由于UI各个地方都有细微差异导致只能这么写,不然就只能分开组件化，这样不划算。
//考虑下后期UI调整要重新修改一波
@observer
class ColumnEventDisplay extends React.Component {
    #now = Date.now();

    // noinspection JSMethodCanBeStatic
    formatDateToView(expiredCount, time) {
        let result = DateFormat(time, 'MM:ss');
        if (expiredCount.day > 0) {
            result = `${expiredCount.day+ (expiredCount.hour > 0 ? 1 : 0)}天`;
        } else if (expiredCount.hour > 0) {
            result = `${expiredCount.hour+ (expiredCount.minute > 0 ? 1 : 0)}小时`;
        } else if (expiredCount.minute > 0) {
            result = `${expiredCount.minute + (expiredCount.minute > 0 ? 1 : 0)}分钟`;
        } else if (expiredCount.second > 0) {
            result = `${expiredCount.minute}秒`;
        }
        return result;
    }

    render() {
        let {item, isMainPage, orderTimeChild, isOrderPage} = this.props;
        let {
            //缩略图
            ImgPaths,
            //标题
            Title,
            //状态
            status,
            //报名人数
            ApplyMemberCount,
            //截止时间
            ActivityExpire,
            //地点
            ActivityAddress,
            //开始时间
            StartTime,
            //结束时间
            EndTime,
            //详情地址,
            To
        } = item || {};

        let Image = ImgPaths?.[0]?.Url || '';
        let now = this.#now;
        let activityDate = formatToCreateDate(ActivityExpire);
        let expiredCount = dateCountdownConvert(activityDate);
        let to = To || RouterList.info.event(item.Id);


        let isActivity = ActivityExpire && activityDate.getTime() > now;
        let startDate = formatToCreateDate(StartTime);
        let endDate = formatToCreateDate(EndTime);
        let isActivities = startDate && endDate && now >= startDate.getTime?.() && now <= endDate.getTime?.();
        if (isActivities) {
            status = '活动中';
        } else {
            status = isActivity ? '报名中' : '已截止';
        }

        return (
            <LinkSelectable to={to} className={"column-common-display column-event-display" +
            (isMainPage ? " --event-list-main-page" : '')}>
                <ImageLoadable src={Image} className={"img"}/>
                <div className="info">
                    <div className="title" title={Title}>
                        <div className={"font-size-30"}>
                            {
                                isMainPage ? null : (
                                    isOrderPage ? null :
                                        <div className={"font-size-16 status" +
                                        (isActivities ? ' activities' : (isActivity ? '' : ' stop'))}>{status}</div>
                                )
                            }
                            <span>{Title}</span>
                            {
                                !isMainPage ? null :
                                    <div className={"font-size-16 status" +
                                    (isActivities ? ' activities' : (isActivity ? '' : ' stop'))}>{status}</div>
                            }
                        </div>
                    </div>
                    {
                        isMainPage ?
                            <>
                                <div className="column font-size-26">
                                    <div className="count">
                                        <span>{ApplyMemberCount}人</span>
                                        <span>已报名</span>
                                    </div>
                                    {
                                        isActivity ?
                                            <div className="time">
                                                <span>{DateFormat(ActivityExpire, 'm月d日')}</span>
                                                <span>报名截止</span>
                                            </div>
                                            :
                                            <div className="time">
                                                <span>已截止报名</span>
                                            </div>
                                    }
                                </div>
                                <div className="column">
                                    <div className="location font-size-24"><span>{ActivityAddress}</span></div>
                                    <div className="time-range font-size-24">
                                        <span>{DateFormat(StartTime, 'm月d日')}</span>
                                        <span>-</span>
                                        <span>{DateFormat(EndTime, 'm月d日')}</span>
                                    </div>
                                </div>
                            </>
                            :
                            <>
                                <div className="column font-size-26 loc-main">
                                    <span className="location">{ActivityAddress}</span>
                                    {
                                        orderTimeChild ? orderTimeChild :
                                            <span className="time-range">
                                                {DateFormat(StartTime, 'm.d')}-{DateFormat(EndTime, 'm.d')}
                                            </span>
                                    }
                                </div>
                                <div className="column font-size-26 time-main">
                                    <div className="count">
                                        <span>{ApplyMemberCount}人</span>
                                        <span>已报名</span>
                                    </div>

                                    {
                                        isActivity ?
                                            <div className="time">
                                                <span>还有</span>
                                                <span
                                                    className={"blue"}>{this.formatDateToView(expiredCount, activityDate)}</span>
                                                <span>报名截止</span>
                                            </div>
                                            :
                                            <div className="time">
                                                <span>已截止报名</span>
                                            </div>
                                    }
                                </div>
                            </>
                    }
                </div>
            </LinkSelectable>
        );
    }
}

export default ColumnEventDisplay;